<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="utf-8"/>
    <meta name='description' content='CNode：Node.js专业中文社区'>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="keywords" content="nodejs, node, express, connect, socket.io"/>
    <link rel="icon" href="//o4j806krb.qnssl.com/public/images/cnode_icon_32.png" type="image/x-icon"/>
    <title>CNode：Node.js专业中文社区</title>
    <link rel="stylesheet" href="assets/lib/seedsui/seedsui.min.css">
    <script src="assets/lib/zepto/zepto.min.js"></script>
    <script src="assets/lib/artTemplate/template-web.js"></script>
</head>
<body>
<div id="section_container">
    <header>
        <div class="titlebar">
            <a data-toggle="back" href="javascript:history.go(-1);">
                <i class="icon icon-arrowleft"></i>
            </a>
            <h1 class="titlebar-title text-center">用户信息</h1>
        </div>
    </header>
    <article id="main_content">

    </article>
    <footer>
        <ul class="tabbar tabbar-footer">
            <li class="tab"  page="index.html">
                <i class="icon icon-home"></i>
                <label class="tab-label">首页</label>
            </li>
            <li class="tab" page="message.html">
                <i class="icon icon-chat"></i>
                <label class="tab-label">消息</label>
            </li>
            <li class="tab" page="user.html">
                <i class="icon icon-person"></i>
                <label class="tab-label">我的</label>
            </li>
        </ul>
    </footer>
    <!-- 加载遮罩 -->
    <!--加载层html显示代码 -->
    <div class="loading" id="ID-Loading" style="display: none;background-color: white;">
        <div class="loading-progress-box">
            <div class="loading-progress"></div>
        </div>
    </div>
</div>
<script id="loginTemplate" type="text/html">
    <form id="loginForm" data-input="clear">
        <div class="group"  style="padding:0 12px;">
            <div class="inputbox basketline">
                <textarea class="input-pre"  name="accesstoken" placeholder="Access Token"></textarea>
                <pre style="width: 374px;">
                <span></span>
            </pre>
                <div class="hline"></div>
            </div>
        </div>
        <div style="margin:0 12px;">
            <input type="button" class="button info submit block" style="width:100%;" value="登录"/>
        </div>
    </form>
</script>
<script id="userTemplate" type="text/html">
    <form id="form-user" method="post">
        <div class="group" style="padding:0 12px;">
            <div class="inputbox underline">
                <label class="inputbox-left">用户</label>
                <div class="inputbox-left inputbox" data-input="clear">
                    <input type="text" class="input-text" name="username" maxlength="16" value="{{loginname}}"/>
                    <i class="icon icon-rdoclose-fill color-placeholder hide"></i>
                </div>
            </div>

            <div class="inputbox underline">
                <label class="inputbox-left">邮箱</label>
                <div class="inputbox-right inputbox">
                    <input type="text" name="mail" class="input-text"/>
                </div>
            </div>

        </div>
        <div style="margin:0 12px;">
            <button id="users" class="button info submit block" style="width: 100%" >保存设置</button>
        </div>
    </form>

    <form id="form-pwd" method="post">
        <div class="group" style="padding:0 12px;">

            <div class="inputbox">
                <label class="inputbox-left">当前密码</label>
                <div class="inputbox-right inputbox" data-input="reveal">
                    <input type="password" class="input-text" name="pwd" maxlength="16"/>
                    <i class="icon icon-eye-fill color-placeholder"></i>
                </div>
            </div>

            <div class="inputbox underline">
                <label class="inputbox-left">确认密码</label>
                <div class="inputbox-right inputbox" data-input="reveal">
                    <input type="password" name="repwd" class="input-text"/>
                    <i class="icon icon-eye-fill color-placeholder"></i>
                </div>
            </div>

        </div>
        <div style="margin:0 12px;">
            <button id="password" class="button info submit block" style="width: 100%" >更改密码</button>
        </div>
    </form>

    <form id="form-loginout" method="post">
        <div style="margin:30px 12px;">
            <button id="loginout" type="button" class="button info submit block" style="width: 100%" >退出登录</button>
        </div>
    </form>

</script>
<script src="assets/lib/seedsui/seedsui.min.js"></script>
<script src="assets/js/common.js"></script>
<script>
    //隐藏遮罩
    /**
     * 定义加载层
     */
    var loading=new Loading({
        container:"#ID-Loading"
    });

    /**
     * 判断用户是否登录
     */
    if(checkIsLogin()){
         loadUserTemplate(JSON.parse(localStorage.getItem('userData')));
    }else{
        var html = template('loginTemplate',{});
        $('#main_content').empty().append(html);
    }

    function loadUserTemplate(user) {
        var html = template('userTemplate',user);
        $('#main_content').empty().append(html);
    }

    /**
     * 用户登录
     */
    $('#main_content').on('click','#loginForm input[type=button]',function () {
        /**
         * 请求数据开始，显示加载层：loading.show();
         */
        loading.show();

        var $this = $(this);
        $.ajax({
            type: "POST",
            url: 'https://cnodejs.org/api/v1/accesstoken',
            dataType: "json",
            data: $this.parents('#loginForm').serialize(),
            success: function (data) {
                if (data.success) {
                    localStorage.setItem('userData', JSON.stringify(data));
                    localStorage.setItem('accessToken', $('[name=accesstoken]').val());
                    loadUserTemplate(user);
                } else {
                    //localStorage.setItem('userData', '');
                    //localStorage.setItem('accessToken', '');
                    var popAlert=new Alert("登录失败，请重新登录",{"title":false});
                    popAlert.show();
                }
                /**
                 * 请求数据结束，隐藏加载层： loading.hide();
                 */
                loading.hide();
            }
        });
    });

    $('#loginout').click(function () {
        localStorage.removeItem('accessToken');
        var html = template('loginTemplate',{});
        $('#main_content').empty().append(html);
    })

</script>
</body>
</html>